/**
 * 主题样式工具（跨 H5 / 小程序 / App 一致可用）
 * 用法：
 *   const { tokens, pageStyle, surfaceCardStyle, textPrimaryStyle, headerBgColor, headerTextColor } = useThemeStyles()
 *   <view :style="pageStyle">...</view>
 */

import { computed } from 'vue'
import { useTheme } from '@/composables/useTheme'

export function useThemeStyles() {
    const { currentThemeConfig } = useTheme()

    // 直接暴露主题 Token，便于在组件 props 中使用颜色值
    const tokens = computed(() => currentThemeConfig.value)

    // 页面背景（常用于根容器）
    const pageStyle = computed(() => ({
        background: tokens.value.background
    }))

    // 卡片/块级容器（半透明背景 + 边框）
    const surfaceCardStyle = computed(() => ({
        background: tokens.value.surface,
        border: `1rpx solid ${tokens.value.border}`
    }))

    // 文本颜色样式
    const textPrimaryStyle = computed(() => ({ color: tokens.value.text.primary }))
    const textSecondaryStyle = computed(() => ({ color: tokens.value.text.secondary }))
    const textTertiaryStyle = computed(() => ({ color: tokens.value.text.tertiary }))

    // 渐变/强调色（可按需使用）
    const gradientBgStyle = computed(() => ({ background: tokens.value.gradient }))
    const accentBgStyle = computed(() => ({ backgroundColor: tokens.value.accent }))

    // 边框/阴影
    const borderStyle = computed(() => ({ borderColor: tokens.value.border }))
    const shadowStyle = computed(() => ({ boxShadow: tokens.value.shadow }))

    // Header 颜色：随当前主题变化（使用主题渐变/主文本色）
    // 如需纯色而非渐变，可改为 tokens.value.primary
    const headerBgColor = computed(() => tokens.value.gradient)
    const headerTextColor = computed(() => tokens.value.text.primary)

    return {
        // 主题 Token
        tokens,

        // 通用样式
        pageStyle,
        surfaceCardStyle,
        textPrimaryStyle,
        textSecondaryStyle,
        textTertiaryStyle,
        gradientBgStyle,
        accentBgStyle,
        borderStyle,
        shadowStyle,

        // Header 颜色
        headerBgColor,
        headerTextColor
    }
}

export type UseThemeStylesReturn = ReturnType<typeof useThemeStyles>
